<template>
  <div class="fresh">
    <div class="fresh-nav">
      <div class="m-container">
        <div class="list" :class="flact==true?'flact':''" v-on:click="flact=!flact">
          <span>{{chosetype}}</span>
          <i class="icon iconfont icon-shouqi" v-if="flact"></i>
          <i class="icon iconfont icon-zhankai" v-else></i>
          <div class="downbox">
            <div class="item" :class="chosetype==item.name?'itemact':''" v-for="item in types" v-on:click="typesbtn($event,item.id)">
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
        <div class="list" :class="pzact==true?'flact':''" v-on:click="pzact=!pzact">
          <span>{{chosepz}}</span>
          <i class="icon iconfont icon-shouqi" v-if="pzact"></i>
          <i class="icon iconfont icon-zhankai" v-else></i>
          <div class="downbox">
            <div class="item" v-for="item in pinzhong" :class="chosepz==item.name?'itemact':''" v-on:click="pzbtn($event,item.id)">
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="limitbox freshbox">
      <div class="list item" v-for="item in cplist"  @click="freshto(item.id)">
        <img alt="" :src="comimgsrc+item.preview">
        <div class="down">
          <p class="name">{{item.name}}</p>
          <p class="price">{{item.price}}<span>/{{item.unit}}</span></p>
        </div>
      </div>
    </div>
    <div class="compage">
          <span @click="syy()"><p>上一页</p></span>
          <span :class="page == n ? 'active':''" v-for="n in last_page" @click="pageon(n)"><p>{{n}}</p></span>
          <span @click="xyy()"><p>下一页</p></span>
        </div>
  </div>
</template>
<script>
import qs from 'qs';

export default {
	name: 'index',
  	data () {
  		return{
        cplist:[],
        comimgsrc:'http://api.mountainfreshes.com',
        flact:false,
        pzact:false,
        types:[],
        chosetype:'分类',
        chosepz:'品种',
        pinzhong:[],
        page:1,
        last_page: 0
  		}
  	},
  	methods:{
      pageon:function(n){
        this.page = n
        this.getfresh()
      },
      syy:function(){
        if(this.page != 1){
          this.page = this.page -1;
          this.getfresh()
        }
      },
      xyy:function(){
        if(this.page<this.last_page){
          this.page = this.page +1;
          this.getfresh()
        }
      },
      getfresh:function(){
        this.$http.post("/index.php/index/goods/CharacteristicList",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  page: this.page

              }))
        .then(res => {
          // console.log(res)
          this.cplist = res.data.data;
          this.last_page = res.data.last_page;
          console.log(this.cplist)
        })
        .catch(error => {
          
        });
      },
      gettypes:function(){
        this.$http.get("/index.php/index/goods/GoodsCateList?cate_id=3")
        .then(res => {
          // console.log(res)
          this.types = res.data;
          
          console.log(this.types)

        })
        .catch(error => {
          
        });
      },
      typesbtn:function(e,b){
        this.chosetype = e.target.innerHTML;
        console.log(b)
        this.$http.get("/index.php/index/goods/CateCharacteristicList?id="+b+"&page="+this.page)
        .then(res => {
          console.log(res)
          this.cplist = res.data.data.data;
          this.pinzhong = res.data.cate_list;
          this.last_page = res.data.data.last_page;
          this.chosepz = '品种'
          this.last_page = res.data.data.last_page;
          // this.types = res.data;
          // console.log(res)
          // console.log(this.cpList1)
        })
        .catch(error => {
          alert('网络错误')
        });
      },
      pzbtn:function(e,b){
        this.chosepz = e.target.innerHTML
        this.$http.get("/index.php/index/goods/CateFreshFruitList?id="+b+"&page="+this.page)
        .then(res => {
          this.cplist = res.data.data.data;
          console.log(res)
          this.last_page = res.data.data.last_page;
          // this.types = res.data;
          // console.log(res)
          // console.log(this.cpList1)
        })
        .catch(error => {
          
        });
      },
      freshto:function(id){
        this.$router.push({ name: 'specialtyDetail', query:{cpid: id} })
      }
  	},
  	components:{

  	},
  	mounted(){

    },
    created(){
      this.getfresh();
      this.gettypes();
    }
}
</script>
<style scoped lang="less">
.limitbox{
  width: 6rem;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin: auto;
  margin-top: .14rem;
  .list{
    width: 2.9rem;
    height: 3.6rem;
    float: left;
    margin-top: .2rem;
    position: relative;
    .djs{
      width: 100%;
      height: .7rem;
      background: rgba(0,0,0,.6);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
    }
    &:nth-child(2n){
      margin-left: .2rem;
    }
    img{
      display: block;
      width: 2.9rem;
      height: 2.36rem;
    }
    .down{
      padding: 0 .1rem;
      height: 1.24rem;
      background: #eeeeee;
      .name{
        font-size: .24rem;
        color: #2a2a2a;
        text-align: center;
        padding-top: .12rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .price{
        font-size: .36rem;
        color: #cf4040;
        text-align: center;
        span{
          font-size: .2rem;
          color: #383838;
        }
      }
      .m_price{
        color: #242424;
        font-size: .2rem;
      }
    }
  }
  .item{
    height: 3.32rem;
    box-sizing: border-box;
    border: .01rem solid #d0d0d0;
    padding: .01rem;
    img{
      display: block;
      width: 100%;
      height: 2.38rem;
    }
    .down{
      background: #fff;
      height: .82rem;
      padding: 0 .1rem;
      border-top: 1px solid #d0d0d0;

      .name{
        font-size: .24rem;
        text-align: left;
      }
      .price{
        font-size: .22rem;
        color: #434343;
        text-align: left;
        padding-top: .08rem;
      }
    }
  }
}
.fresh-nav{
  margin-top: .1rem;
  background: #eeeeee;
  height: .76rem;
  width: 100%;
  border-bottom: .02rem solid #b5b5b5;
  float: left;
  .m-container{
    padding: 0 .2rem;
    height: .36rem;
    margin-top: .2rem;
    .list{
      width: 50%;
      text-align: center;
      height: 100%;
      float: left;
      line-height: .36rem;
      color: #333333;
      position: relative;
      .downbox{
        width: 80%;
        height: 4rem;
        position: absolute;
        z-index: 999999;
        top: .58rem;
        left: 10%;
        background: #fff;
        box-sizing: border-box;
        border: 1px solid #d6d6d6;
        overflow-y:scroll;
        display: none;
        .item{
          width: 100%;
          height: .52rem;
          border-bottom: 1px dashed #d6d6d6;
          p{
            font-size: .24rem;
            color: #333;
            text-align: center;
            line-height: .46rem;
          }
        }
        .itemact{
          p{
            color: #54b84c;
          }
        }
      }
      span{
        font-size: .26rem;
      }
      i{
        font-size: .24rem;
      }
    }
    .flact{
      color: #54b84c;
      .downbox{
        display: block;
      }
    }
  }
}
</style>